<template>
    <!-- 保安 -->
    <Navbar title="首页" />
    <view class="bg-[#F7F8FA] h-[100vh] flex flex-col">
        <!-- 顶部标题 -->
        <view class="flex-1 px-4">
            <h1 class="text-[#333333] text-[26rpx] font-[600] text-center my-4">一般性访客信息</h1>
            <!-- 表单区域 -->
            <TnForm :model="formData" labelWidth="160" label-position="left">
                <!-- 访问时间 -->
                <h2 class="text-[24rpx] font-[300]! text-gray-800 my-3">访客信息</h2>
                <TnFormItem label="访问时间">
                    <SelectPicker type="date" />
                </TnFormItem>

                <!-- 姓名 -->
                <TnFormItem label="姓名">
                    <TnInput v-model="formData.name" placeholder="请输入姓名" />
                </TnFormItem>

                <!-- 来访公司（示例：下拉选择） -->
                <TnFormItem label="来访公司">
                    <SelectPicker type="picker" />
                </TnFormItem>

                <!-- 联系电话 -->
                <TnFormItem label="联系电话">
                    <TnInput v-model="formData.phone" placeholder="请输入联系电话" type="number" />
                </TnFormItem>

                <!-- 车牌号 -->
                <TnFormItem label="车牌号(无则免填)" labelWidth="260">
                    <TnInput v-model="formData.carNo" placeholder="无则免填" />
                </TnFormItem>
                <TnFormItem label="访问部门">
                    <SelectPicker type="picker" />
                </TnFormItem>
                <TnFormItem label="是由">
                    <TnInput v-model="formData.carNo" placeholder="无则免填" />
                </TnFormItem>
                <TnFormItem label="接待人">
                    <TnInput v-model="formData.carNo" placeholder="无则免填" />
                </TnFormItem>

                <Divider />
                <h2 class="text-[24rpx] font-[300]! text-gray-800 my-3">安保确认</h2>
                <TnFormItem label="接待人确认">
                    <TnRadioGroup>
                        <TnRadio label="男">已确认</TnRadio>
                        <TnRadio label="女">未确认</TnRadio>
                    </TnRadioGroup>
                </TnFormItem>
                <TnFormItem label="车辆停放">
                    <TnRadioGroup>
                        <TnRadio label="男">内部</TnRadio>
                        <TnRadio label="女">外部</TnRadio>
                        <TnRadio label="女">无车辆</TnRadio>
                    </TnRadioGroup>
                </TnFormItem>
                <TnFormItem label="备注说明" label-position="top">
                    <TnInput type="textarea" placeholder="请输入描述" height="150" />
                </TnFormItem>
                <TnFormItem label="安保人员">
                    肖小关
                </TnFormItem>
                <TnFormItem label="相关图片">
                    <TnImageUpload v-model="formData.imageList" :action="'actionUrl'" :limit="5" />
                </TnFormItem>
                <!-- 操作按钮 -->
                <view class="text-center flex">
                    <TnButton type="info" class="w-full! h-[80rpx] bg-[red] mr-2">
                        作废
                    </TnButton>
                    <TnButton type="primary" class="w-full! h-[80rpx] ml-2" @click="onSubmit">
                        确认提交
                    </TnButton>
                </view>
            </TnForm>
        </view>
    </view>
</template>

<script setup lang="ts">
import { SelectPicker } from '@/components/selectPicker';
import { Navbar } from '@/components/navbar';
import { TnButton, TnForm, TnFormItem, TnImageUpload, TnInput, TnPicker } from '@tuniao/tnui-vue3-uniapp';
import TnRadio from '@tuniao/tnui-vue3-uniapp/components/radio/src/radio.vue'
import TnRadioGroup from '@tuniao/tnui-vue3-uniapp/components/radio/src/radio-group.vue'
import { ref } from 'vue';
import { Divider } from '@/components/divider';
import { navigateTo } from '@/utils/utils';
// 表单数据
const formData = ref({
    imageList: [],
    visitTime: '',
    name: '',
    company: '立方鼎（厦门）工贸有限公司', // 示例默认值
    phone: '',
    carNo: '',
    department: '品管部', // 示例默认值
    reason: '',
    receiver: '',
});

// 下拉选项（可根据实际接口动态获取）
const companyOptions = ref([
    { label: '立方鼎（厦门）工贸有限公司', value: '立方鼎（厦门）工贸有限公司' },
    { label: '厦门九号科技有限公司', value: '厦门九号科技有限公司' },
]);
const departmentOptions = ref([
    { label: '品管部', value: '品管部' },
    { label: '市场部', value: '市场部' },
]);

// 取消逻辑
const onCancel = () => {
    // 可返回上一页或重置表单
    uni.navigateBack();
};

// 提交逻辑（示例：跳转保安填写页并传参）
const onSubmit = () => {
    navigateTo('/pages/general-visitors/qrcode/index')
};
</script>